<template>
  <div id="main"></div>
</template>

<script>
// import echarts from "echarts";
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
// import { getJson } from "../../../api/public.js";
import echarsData from "../../../public/json/echarsData.json";
export default {
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "350px",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.initChart()
    // getJson().then(res => {
    let zongliangqushi = echarsData.zongliangqushi;
    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);
    var option;

    let series = [];
    let legend = zongliangqushi.legend;
    for (let index = 0; index < zongliangqushi.series.length; index++) {
      series.push({
        name: legend[index],
        type: "line",
        stack: "总量" + index,
        data: zongliangqushi.series[index],
      });
    }
    option = {
      title: {
        text: "工业增加值能耗",
        //subtext: "深圳节能在线",
        textStyle: {
          //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
          color: "#fff",
          fontSize: 16,
        },
        subtextStyle: {
          color: "#fff",
          fontSize: 14,
        },
        left: "center",
        align: "right",
      },
      tooltip: {
        trigger: "axis",
      },
      color: [
        "#5ad8a6",
        "#f6bd16",
        //"#e8684a",
        "#5470c6",
        "#87ba76",
        "#fac858",
        //"#ea7c71",
        "#f1ab60",
        "#1ab8c2",
        "#418dd3",
      ],
      legend: {
        textStyle: {
          fontSize: 14, //字体大小
          color: "#fff", //字体颜色
        },
        orient: "vertical",
        left: "center",
        bottom: "bottom",
        data: legend,
      },
      grid: {
        left: "0%",
        right: "2%",
        bottom: "10%",
        containLabel: true,
      },

      xAxis: {
        axisLine: {
          lineStyle: {
            color: "#fff",
            width: 1, //这里是为了突出显示加上的
          },
        },
        type: "category",
        boundaryGap: false,
        data: zongliangqushi.xAxis,
      },
      yAxis: {
        type: "value",
        axisLine: {
          lineStyle: {
            color: "#fff",
            width: 1, //这里是为了突出显示加上的
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            // 使用深浅的间隔色
            color: ["#fff"],
            opacity: 0.1,
          },
        },
      },
      series: series,
    };

    option && myChart.setOption(option);
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      // this.chart = echarts.init(this.$el, "macarons");
      //this.setOptions(this.chartData);
    },
  },
};
</script>
<style >
/* #main {
  height: 100%;
} */
</style>
